<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>- 消费统计 -</title>
</head>
		<base href="<%=basePath%>">
		 <script src="assets/js/jquery-1.10.2.js"></script>
		<script src="assets/js/echarts.js"></script>

	<body>
<!-- 显示Echarts图表 -->
		<div style="height:410px;min-height:100px;margin:0 auto;" id="main"></div>						
            		
  	
  
		<script type="text/javascript">
			
		// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {	//图表标题
                text: '消费统计表'
            },
            tooltip: {
                trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
               
            },
            dataZoom: [
                 {
                     type: 'slider',	//支持鼠标滚轮缩放
                     start: 0,			//默认数据初始缩放范围为10%到90%
                     end: 100
                 },
                 {
                     type: 'inside',	//支持单独的滑动条缩放
                     start: 0,			//默认数据初始缩放范围为10%到90%
                     end: 100
                 }
            ],
            legend: {	//图表上方的类别显示           	
            	show:true,
            	data:['金额（元）']
            },
            color:[
                   '#FF3333',	//金额曲线颜色
                  
                   ],
           toolbox: {
               feature: {
                 dataView: {show: true, readOnly: false},
                 magicType: {show: true, type: ['line', 'bar']},
                 restore: {show: true},
                 saveAsImage: {show: true}
               }
             },
            xAxis:  {	//X轴       	
                type : 'category',
                data : []	//先设置数据值为空，后面用Ajax获取动态数据填入
            },
            yAxis : [	//Y轴（这里我设置了两个Y轴，左右各一个）
						{
            				//第一个（左边）Y轴，yAxisIndex为0
	                         type : 'value',
	                         name : '当月消费金额',
	                         /* max: 120,
	                         min: -40, */
	                         axisLabel : {
	                             formatter: '{value} 元'	//控制输出格式
	                         }
	                     },
	          
            ],
            series : [	//系列（内容）列表                      
						{
		                    name:'金额（元）',
		                    type:'line',	//折线图表示（生成金额曲线）
		                    symbol:'emptycircle',	//设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形	                    
		                    data:[]		//数据值通过Ajax动态获取
		                }     
            ]
        };
		 
		myChart.showLoading();	//数据加载完之前先显示一段简单的loading动画
		 
		 var htol_amts=[];		//金额数组（存放服务器返回的所有金额值）
		
		 var hcontract_dates=[];		//时间数组
		 
         $.ajax({	//使用JQuery内置的Ajax方法
         type : "post",		//post请求方式
         async : true,		//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "getjine.action",	//请求发送到ShowInfoIndexServlet处
        
         dataType : "json",		//返回数据形式为json
         success : function(result) {
        	 //请求成功时执行该函数内容，result即为服务器返回的json对象
	         if (result != null && result.length > 0) {
	                for(var i=0;i<result.length;i++){       
	                	htol_amts.push(result[i].money);		//挨个取出温度、湿度、压强等值并填入前面声明的温度、湿度、压强等数组
	                	hcontract_dates.push(result[i].time);
	                }
	                myChart.hideLoading();	//隐藏加载动画
	                
	                myChart.setOption({		//载入数据
	   		         xAxis: {
	   		             data:hcontract_dates	//填入X轴数据
	   		         },
	   		         series: [	//填入系列（内容）数据
	   		               		{
			   		             // 根据名字对应到相应的系列
			   		             name: '本月消费金额',
			   		             data: htol_amts
	   		         		}
	   		        ]
	   		     });
	                
	         }
	         else {
	        	 //返回的数据为空时显示提示信息
	        	 alert("图表请求数据为空，可能服务器暂未录入近五天的观测数据，您可以稍后再试！");
	          	 myChart.hideLoading();
	         }
         
		},
     	error : function(errorMsg) {
     		//请求失败时执行该函数
         	alert("图表请求数据失败，可能是服务器开小差了");
         	myChart.hideLoading();    	
     	}
    })

    myChart.setOption(option);	//载入图表
		 
    </script>
		
	</body>
</html>